<template>
  <div class="wrap">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__title">智慧消防</span>
        <span class="banner-main__subtitle" style="line-height: 28px">
          基于物联感知设备实现城区火灾、用水用电、烟感、燃气等多维度<br />
          消防数据的可视化感知监控， 提高消防应急管理效率与响应速度。
        </span>
        <span class="banner-main__btn" @click="showDialog">服务咨询</span>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案描述</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <span class="description">
            基于NB-IoT的智能消防系统解决方案。系统是集NB-IoT硬件设备、移动物联网专网、云平台、手机APP于一体的综合性智能系统。主要针对老、旧、小、分散场所的消防改造和消防设施添加困难问题，提供城市消防监测解决方案，解决火灾报警设备在这些场所的部署、管理与维护难题。<br />               
          </span>
          <div align="center"><img src="@/assets/zhxf4.jpg" width="100%" /></div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案架构</h1>
        <h6 class="model-desc">Scheme architecture</h6>
        <img style="margin: 20px auto 0px; display: block;" src="@/assets/zhxf2.png" width="100%" />
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案优势</h1>
        <h6 class="model-desc">Scheme advantage</h6>
        <div class="card">
          <div align="center"><img src="@/assets/zhxf3.png" width="100%" /></div><br />
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">案例展示</h1>
        <h6 class="model-desc">Case presentation</h6>
        <div class="card">
          <div align="center"><img src="@/assets/xf1.png" width="100%" /></div><br />
          <div align="center"><img src="@/assets/xf2.png" width="100%" /></div><br />
          <div align="center"><img src="@/assets/xf3.png" width="100%" /></div>  
        </div>
      </div>
    </div>
    <el-dialog title="感谢联系铝工业互联平台" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="咨询类型" :label-width="formLabelWidth">
          <el-select v-model="form.prop1" style="width:380px">
            <el-option label="方案咨询" value="value1"></el-option>
            <el-option label="优惠活动" value="value2"></el-option>
            <el-option label="售后服务" value="value3"></el-option>
            <el-option label="商务合作" value="value4"></el-option>
            <el-option label="其他" value="value5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.prop2"
            ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.prop3">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.prop4">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.prop5">
          </el-input>
        </el-form-item>
        <el-form-item label="所在行业" :label-width="formLabelWidth">
          <el-select v-model="form.prop6" style="width:380px">
            <el-option label="政府" value="value1"></el-option>
            <el-option label="教育" value="value2"></el-option>
            <el-option label="医疗" value="value3"></el-option>
            <el-option label="传媒" value="value4"></el-option>
            <el-option label="金融" value="value5"></el-option>
            <el-option label="互联网" value="value6"></el-option>
            <el-option label="IT" value="value7"></el-option>
            <el-option label="制造" value="value8"></el-option>
            <el-option label="能源" value="value9"></el-option>
            <el-option label="化工" value="value10"></el-option>
            <el-option label="汽车" value="value11"></el-option>
            <el-option label="物流" value="value12"></el-option>
            <el-option label="农业" value="value13"></el-option>
            <el-option label="建筑" value="value14"></el-option>
            <el-option label="服务" value="value15"></el-option>
            <el-option label="贸易" value="value16"></el-option>
            <el-option label="其他" value="value17"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        [
          { icon: require('@/assets/icon_01.png'), title: '同一系统，可以多次迁移；' },
          { icon: require('@/assets/icon_02.png'), title: '迁移前，可方便的进行迁移演练，验证迁移计划可行性；' }
        ],
        [
          { icon: require('@/assets/icon_03.png'), title: '对现有系统几乎没有什么要求，也不会有什么影响；' },
          { icon: require('@/assets/icon_04.png'), title: '99%的业务迁移成功率，为用户提供可靠的迁移保障。' }
        ],
        [
          { icon: require('@/assets/icon_05.png'), title: '数据迁移过程，业务连续性不会中断，只有切换时的秒断；' },
          { icon: require('@/assets/icon_06.png'), title: '即使新系统仍然在运行，也能保证数据一致性，迁移后的新系统与源系统一样；' }
        ],
        [
          { icon: require('@/assets/icon_07.png'), title: '独有的PCI虚拟技术，驱动智能匹配，轻松解决老系统到新平台的硬件兼容性问题；' },
          { icon: require('@/assets/icon_08.png'), title: '不论源业务系统是Windows还是Linux，统一的图形化操作界面，精简的操作步骤，只需简单点击鼠标，几步操作就可以完成迁移；' }
        ],
        [
          { icon: require('@/assets/icon_09.png'), title: '与应用系统的具体业务无关，从系统底层打包数据，所以无需了解业务系统的具体细节，只需了解一些从应用系统外部很容易了解的信息，如操作系统版本，分布于几个磁盘，数据量有多大等就可以实施迁移；' },
        ]
      ],
      dialogFormVisible: false,
      formLabelWidth: '80px',
      form: {
        prop1: '',
        prop2: '',
        prop3: '',
        prop4: '',
        prop5: '',
        prop6: '',
      }
    }
  },
  methods: {
    showDialog () {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/variables.less';

.wrap {
  background-color: rgb(246, 246, 246);
}

.banner {
  width: 100%;
  height: 400px;
  background: url('~@/assets/zhxf1.jpg') no-repeat center 100%;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: #ffffff;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: #ffffff;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

.model {
  padding: 60px 0;
  .model-main {
    width: 1200px;
    margin: 0 auto;
    .card {
      .card-box {
        margin-bottom: 15px;
        line-height: 28px;
      }
    }
    .row {
      margin-right: -8px;
      margin-right: -8px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .row-box {
        display: flex;
        flex: 1;
        align-items: center;
        background-color: #2a3f74;
        color: #698acd;
        border: 1px #405b9f solid;
        padding: 20px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        .row-icon {
          width: 46px;
          height: 46px;
          margin-right: 20px;
        }
      }
      .row-card {
        background: #2a3f74;
        color: #698acd;
        padding: 15px;
        padding-left: 95px;
        line-height: 28px;
        margin-bottom: 15px;
        border: 1px #405b9f solid;
      }
    }
  }
  .model-title {
    color: #403d56;
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .model-desc {
    color: #bababa;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 50px 0;
    padding: 0;
    text-align: center;
    .card{
      .description{
      line-height: 28px;
      }
    }
  }
  &:nth-child(odd) {
    background: rgb(32, 50, 96);
    .model-title {
      color: rgb(97, 145, 221);
    }
    .model-desc {
      color: rgb(70, 106, 170);
    }
  }
}

.card {
  @box_shadow();
  width: 100%;
  padding: 30px;
  background: #fff;
}
.description{
  line-height: 28px;
}

</style>
